<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,maximum-scale=1.0,minimum-scale=1.0,initial-scale=1.0,user-scalable=no">
    <title>相册</title>
    <script src="js/common.js"></script>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/common.css" />
    <link rel="stylesheet" href="css/swiper-3.4.0.min.css">
    <link rel="stylesheet" href="css/storeDetails.css">
</head>
<body>
    <!-- album start -->
    <div class='container wrapper'>
        <ul class="clearfix">
            <li><img src="images/6186654951503791.jpg" alt=""></li>
            <li><img src="images/201632133112728.jpg" alt=""></li>
            <li><img src="images/61870069328736.jpg" alt=""></li>
            <li><img src="images/1425624103554.jpg" alt=""></li>
            <li><img src="images/908fa0ecfbb3fbd955.jpg" alt=""></li>
            <li><img src="images/6186674595528498.jpg" alt=""></li>
            <li><img src="images/6186696740172785.jpg" alt=""></li>
            <li><img src="images/6186706112547261_490x490.jpg" alt=""></li>
            <li><img src="images/6186714807388823.jpg" alt=""></li>
            <li><img src="images/16051011510814988898.jpg" alt=""></li>
            <li><img src="images/img2231419841591.jpg" alt=""></li>
            <li><img src="images/img38801411624981.jpg" alt=""></li>
            <li><img src="images/img61781403601369.jpg" alt=""></li>
            <li><img src="images/img91141416818339.jpg" alt=""></li>
        </ul>

    </div>
    <!-- album end -->
<script src="js/zepto.min.js"></script>
<script src="js/fastclick.js"></script>
<script src="js/layer.js"></script>
<script src="js/swiper-3.4.0.min.js"></script>
<script>  
    var html='<div class="swiper-container"><div class="swiper-wrapper"></div></div>'; 
    var num = $('.container ul li').size();
    //点击图片即可进入预览
    FastClick.attach(document.body);
    $('.container ul li').on("tap",function(){
        var liIndex = $(this).index();
        //弹出遮罩层
        var pageii = layer.open({
         type: 1,
         content: html,
         shade: 'background-color: rgba(0,0,0,.8)',
         style: 'margin:auto; width:7.5rem; border: none; -webkit-animation-duration: .5s;animation-duration: .5s;',
         success:function(ele){ 
            $('.layui-m-layercont').prepend($('<p>').addClass('page')) //页数提示
            $('.page').append($('<span>').addClass('curPage').text(1)).append('/'+num);
            for(var i=0 ; i<num ; i++){
                var img = $('.container ul li').eq(i).children();
                var slide = $('<div>').addClass('swiper-slide');
                img.clone().appendTo(slide);
                $('.swiper-wrapper').append(slide);
            }
            //swiper
            var mySwiper = new Swiper ('.swiper-container', {
                direction: 'horizontal',
                initialSlide :liIndex,//设定初始化时slide的索引
                onSlideChangeEnd:function(swiper){ 
                    $('.curPage').text(swiper.activeIndex+1) //切换结束时，告诉我现在是第几个slide
                },
                onTap: function(){//点击图片即可关闭遮罩层
                    layer.close(ele.getAttribute("index"));
                }
            }) 
          }
        });
        
    });
</script>
</body>
</html>